/**
 * 1. 焦点图
 */
(function(){
  // 获取相关元素
  const nav = document.querySelector('.nav')
  const navLis = document.querySelectorAll('.nav li')
  const prev = document.querySelector('.banner-right .prev')
  const next = document.querySelector('.banner-right .next')
  const paging = document.querySelectorAll('.paging li')
  // 上下张切换变量
  let count = 0
  /* console.log(nav, navLis, prev, next, paging) */

  // 注册点击事件
  // 上一张
  prev.addEventListener('click', function () {
    // console.log(111)
    count--
    if (count < 0) {
      count = navLis.length - 1
    }
    // 排他 先移除掉所有的类 再一个一个添加
    for (let i = 0; i < navLis.length; i++) {
      navLis[i].classList.remove('active')
      // 小圆点
      paging[i].classList.remove('active')
    }
    navLis[count].classList.add('active')
    paging[count].classList.add('active')

  })
  // 下一张
  next.addEventListener('click', function () {
    count++
    // 如果count 大于等于元素的长度 则重置为零 展示第一张图片
    if (count >= navLis.length) {
      count = 0
    }
    // 排他 先移除掉所有的类 再一个一个添加
    for (let i = 0; i < navLis.length; i++) {
      navLis[i].classList.remove('active')
      paging[i].classList.remove('active')
    }
    navLis[count].classList.add('active')
    paging[count].classList.add('active')
    // console.log(count)
  })
  // 定时器
  let timeId = setInterval(function () {
    next.click()
  }, 3000)

  // 鼠标经过暂停
  nav.addEventListener('mouseenter', function () {
    // console.log(111)
    // 停止定时器
    clearInterval(timeId)
  })

  // 鼠标离开继续
  nav.addEventListener('mouseleave', function () {
    // console.log(222)
    clearInterval(timeId)
    timeId = setInterval(function () {
      next.click()
    }, 3000)
  })
})();

/**
 * 2. 电梯导航
 *  说明：电梯导航显示与隐藏，回到顶部
 */
(function(){
  const elevator = document.querySelector('.xtx-elevator')
  const banner = document.querySelector('.xtx-banner')
  const backTop = document.querySelector('.backTop')
  document.addEventListener('scroll',function(){
    // 2.1. 判断电梯当行的是否显示
    // document.documentElement.scrollTop 被卷去的头部大于300
    // 这里将300换成了一个banner离顶部的距离
    if(document.documentElement.scrollTop>=banner.offsetTop){
      elevator.style.opacity = 1
    }else{
      elevator.style.opacity = 0
    }
  })
  // 2.2. 返回顶部
  backTop.addEventListener('click',function(e){
    // 这种方法也是可以的使用scrollTo函数，但是不常用，它们的区别是一个是属性，一个是方法
    window.scrollTo(0,0)
    document.documentElement.scrollTop = 0
  })
})();

/**
 * 3. 电梯导航
 *  说明：点击导航，页面滑动
 */
(function(){
  const elevator = document.querySelector('.xtx-elevator')
  // 3.1. 点击导航去对应的模块
  elevator.addEventListener('click',function(e){
    if(e.target.tagName === 'A' && e.target.dataset.name){
      const old = document.querySelector('.xtx-elevator li .active')
      if(old){
        old.classList.remove('active')
      }
      e.target.classList.add('active')
      // 获取点击元素的自定义属性
      // let attr = e.target.dataset.name
    
      const elemTop = document.querySelector(`.section .${e.target.dataset.name}`).offsetTop
      // 将当前元素的offsetTop复制给documen.docuemntElement.scroolTop
      document.documentElement.scrollTop = elemTop
    }
  })

  // 3.2. 页面滑动，选择对应的导航（根据大盒子选择小盒子）小盒子添加active
  // 3.2.1. 添加页面滚动事件
  window.addEventListener('scroll',function(){
    // 3.2.2. 清除原有的active
     const elevator = document.querySelector('.xtx-elevator li .active')
     if(elevator){
      elevator.classList.remove('active')
     }
    // 3.2.3. 判断页面当前滑动的位置，选择小盒子
    const news = document.querySelector('.section .new')
    const popular = document.querySelector('.section .popular')
    const brand = document.querySelector('.section .brand')
    const topic = document.querySelector('.section .topic')
    const n = document.documentElement.scrollTop
    if( n >= news.offsetTop  && n < popular.offsetTop){
      // 3.2.4. 这里利用了属性选择器
      document.querySelector('[data-name="new"]').classList.add('active')
    }else if(n >= popular.offsetTop && n < brand.offsetTop){
      document.querySelector('[data-name="popular"]').classList.add('active')
    }else if(n >= brand.offsetTop && n < topic.offsetTop){
      document.querySelector('[data-name="brand"]').classList.add('active')
      // 3.2.5. 这个是因为下面没有内容了，所以不需要让n小于某某模块，但是严格意义上这个位置还是需要判断
    }else if(n >= topic.offsetTop){
      document.querySelector('[data-name="topic"]').classList.add('active')
    }
  })

})();